<template>
    <div class="carousel-container">
        <!--使用bootstrap 轮播组件-->
        <div id="carouselExampleFade" ref="carouselExampleFade" class="carousel slide carousel-fade" data-keyboard="true" data-pause="false" data-ride="carousel">
            <div class="carousel-control container-self d-flex flex-row align-items-center">
                <div class="focusswiper_video_contro">
                    <span class="cu-hand"><i class="iconfont icon-bofang1"></i></span>
                    <span class="cu-hand"><i class="iconfont icon-guanzhu"></i></span>
                </div>
                <div class="info cu-hand">
                    <h4>乡村爱情</h4>
                    <h5>乡村爱情</h5>
                </div>
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleFade" data-slide-to="1"></li>
                    <li data-target="#carouselExampleFade" data-slide-to="2"></li>
                </ol>
            </div>

            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        name: "carousel",
        data(){
            return{}
        },
        methods:{

        },
        mounted() {
            var carouseldiv=this.$refs.carouselExampleFade;
            $(carouseldiv).on('slid.bs.carousel', function (obj) {
                // obj.from 当前索引, obj.to 下一个

            });
        }
    }
</script>

<style scoped lang="scss">
.carousel-container{
    height: 100%;
    #carouselExampleFade{
        height: 100%;
        img{width: 100%;}
        .carousel-control{
            height: 60px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translate(-50%,0);
            z-index: 10;
            .carousel-indicators{
                left: auto;
                margin:0;
                li{height: 6px;}
            }
            .focusswiper_video_contro{
                span{
                    width: 47px;height: 47px;
                    border-radius: 50%;
                    background-color:rgba(0,0,0,.5);
                    display: inline-block;
                    margin-right: 15px;
                    text-align: center;
                    border: 1px solid #928d8d;
                    transition: all .2s linear;
                    &:hover{
                        transform: scale(1.2);
                        i{color: #555555}
                        background-color: white;
                    }
                }
                i{
                    font-size: 24px;
                    color: white;
                    line-height: 190%;
                }
            }
            .info{
                h4,h5{color: white;font-family:'黑体','宋体','Arial';margin-left: 10px}
                h4{font-size: 20px;margin-bottom: 3px}
                h5{font-size: 16px;}
            }
        }
    }
}
</style>